<template>
	<div class="page">
		<!-- search -->
		<div class=""
			style="display: flex;flex-direction: row;align-items: center;padding: 12px;background-color: #FFFFFF;justify-content: space-between;">
			<div class="" @click="popBack()">
				<div class="iconfont icon-arrow-left" style="font-size: 16px;font-weight: bold;"></div>
				<div style="font-size: 16px;">四川大学什么事忙什么的学期</div>
			</div>
			<div
				style="
				display: flex;align-items: center;
				padding: 5px 12px;border-style: solid;border-width: 1px;border-color: #007AFF;border-radius: 16px;max-width: 90px;">
				<div style="text-align: center;font-size: 14px;color: #007AFF;display: block;">推送</div>
				<div class="iconfont icon-fasong"
					style="font-size: 12px;color: #007AFF;margin-left: 5px;display: block;"></div>
			</div>
		</div>

		<!-- list -->
		<div class="" style="flex: 1;overflow-y: auto;">
			<!-- title -->
			<div style="padding: 12px;background-color: #FFFFFF;">
				<div style="font-size: 16px;font-weight: bold;">四川大学安达健康和打卡好看的贺卡好的哈返回安徽省点卡货架上的痕迹卡号的</div>
				<div style="display: flex;margin-top: 12px;">
					<div style="
						display: flex;align-items: center; background-color: #ffffff;
						padding: 3px 10px;border-style: solid;border-width: 1px;border-color: #ff0000;">
						<div style="text-align: center;font-size: 12px;color: #FF0000;display: block;">代报名</div>
					</div>
				</div>
			</div>
			<!-- line -->
			<div style="height: 12px;background-color: #F1F1F1;" />
			<!-- 基本信息 -->
			<div style="padding: 12px;background-color: #FFFFFF">
				<form-title :title="detailModel.baseInfo.title"></form-title>
				<form-key-value-row :keystr="key" :valuestr="detailModel.baseInfo.data[key]"
					v-for="(key,idx) in Object.keys(detailModel.baseInfo.data)" :key="idx"></form-key-value-row>
				<!-- switch -->
				<div
					style="display: flex;align-items: center;flex-direction: row;padding-bottom: 5px;background-color: #FFFFFF;">
					<div style="font-size: 12px;color: #999999;flex: 1;">上线状态</div>
					<div style="display: flex;flex-direction: row;flex: 2;">
						<switch checked style="transform: scale(0.5);margin-left: -15px;" color="#00aa00" />
					</div>
				</div>
			</div>
			<!-- line -->
			<div style="height: 12px;background-color: #F1F1F1;" />
			<!-- 详情信息 -->
			<div style="padding: 12px;background-color: #FFFFFF">
				<form-title :title="detailModel.detailInfo.title"></form-title>
				<form-key-value-row :keystr="key" :valuestr="detailModel.detailInfo.data[key]"
					v-for="(key,idx) in Object.keys(detailModel.detailInfo.data)" :key="idx"></form-key-value-row>
				<form-key-des></form-key-des>
			</div>
			<!-- line -->
			<div style="height: 12px;background-color: #F1F1F1;" />
			<!-- 课程信息 -->
			<div style="padding: 12px;background-color: #FFFFFF">
				<form-title :title="detailModel.classInfo.title"></form-title>
				<form-key-value-row :keystr="key" :valuestr="detailModel.detailInfo.data[key]"
					v-for="(key,idx) in Object.keys(detailModel.detailInfo.data)" :key="idx"></form-key-value-row>
				<form-key-des></form-key-des>
			</div>
			<!-- line -->
			<div style="height: 12px;background-color: #F1F1F1;" />
			<!-- 课程表 -->
			<div style="padding: 12px;background-color: #FFFFFF">
				<form-title :title="detailModel.semesterInfo.title"></form-title>
				<!-- list -->
				<div style="flex: 1;background-color: #FFFFFF;">
					<!-- header -->
					<div
						style="display: flex;background-color: #f5f5f5;height: 45px;justify-content: center;align-items: center;">
						<div style="display: block;text-align: center;font-size: 14px;flex: 1;">日期</div>
						<div style="display: block;text-align: center;font-size: 14px;flex: 1;">时间</div>
						<div style="display: block;text-align: center;font-size: 14px;flex: 1;">课程名</div>
					</div>
					<!-- cell -->
					<div style="display: flex;flex-direction: column;" v-for="idx in 3">
						<div
							style="display: flex;background-color: #FFFFFF;height: 45px;justify-content: center;align-items: center;flex: 1;">
							<div style="display: block;text-align: center;font-size: 14px;flex: 1;">9.20</div>
							<div style="display: block;text-align: center;font-size: 14px;flex: 1;">08:20</div>
							<div style="display: block;text-align: center;font-size: 14px;flex: 1;">java UI设计</div>
						</div>
						<div style="height: 1px;background-color: #F1F1F1;" />
					</div>

				</div>
			</div>


			<!-- line -->
			<div style="height: 12px;background-color: #F1F1F1;" />
			<!-- 课程表 -->
			<div style="padding: 12px;background-color: #FFFFFF">
				<form-title title="附件"></form-title>
				<div class=""
					style="flex: 2;background-color: #007AFF30;display: flex;flex-direction: row;align-items: center;padding-left: 5px;padding-right: 5px;">
					<div class="iconfont icon-fujian"
						style="font-size: 12px;margin-right: 5px;color: #999999"></div>
					<div style="font-size: 12px;color: #007AFF;flex: 2;">课程表.pdf</div>
					<div class="iconfont icon-fasong"
						style="font-size: 12px;color: #007AFF;margin-left: 5px;display: block;"></div>
				</div>
			</div>
		</div>





	</div>
</template>

<script>
	export default {

		data() {
			return {
				"detailModel": {
					"baseInfo": {
						"style": "00",
						"title": "基础资料",
						"data": {
							"学校编号": "1654687",
							"跟进进度": "1111",
							"负责人": "222",
							"创建人": "333",
							"创建时间": "444",
						}
					},
					"detailInfo": {
						"title": "详情",
						"data": {
							"中文名": "四川大学",
							"性质": "公立大学",
							"性质": "公立大学",
							"性质": "公立大学",
							"性质": "公立大学",
							"性质": "公立大学",
							"性质": "公立大学",
							"性质": "公立大学",
							"竞争对手描述": "竞争对手描述竞争对手描述竞争对手描述竞争对手描述竞争对手描述竞争对手描述",
							"竞争对手描述": "竞争对手描述竞争对手描述竞争对手描述竞争对手描述竞争对手描述竞争对手描述",
							"竞争对手描述": "竞争对手描述竞争对手描述竞争对手描述竞争对手描述竞争对手描述竞争对手描述",
							"竞争对手描述": "竞争对手描述竞争对手描述竞争对手描述竞争对手描述竞争对手描述竞争对手描述",
							"竞争对手描述": "竞争对手描述竞争对手描述竞争对手描述竞争对手描述竞争对手描述竞争对手描述",
						}
					},
					"classInfo": {
						"title": "课程信息",
						"data": {
							"中文名": "四川大学",
							"性质": "公立大学",
							"性质": "公立大学",
							"性质": "公立大学",
							"性质": "公立大学",
							"性质": "公立大学",
							"性质": "公立大学",
							"性质": "公立大学",
							"竞争对手描述": "竞争对手描述竞争对手描述竞争对手描述竞争对手描述竞争对手描述竞争对手描述",
							"竞争对手描述": "竞争对手描述竞争对手描述竞争对手描述竞争对手描述竞争对手描述竞争对手描述",
							"竞争对手描述": "竞争对手描述竞争对手描述竞争对手描述竞争对手描述竞争对手描述竞争对手描述",
							"竞争对手描述": "竞争对手描述竞争对手描述竞争对手描述竞争对手描述竞争对手描述竞争对手描述",
							"竞争对手描述": "竞争对手描述竞争对手描述竞争对手描述竞争对手描述竞争对手描述竞争对手描述",
						}
					},
					"semesterInfo": {
						"title": "课程表",
						"data": {
							"中文名": "四川大学",
							"性质": "公立大学",
							"性质": "公立大学",
							"性质": "公立大学",
							"性质": "公立大学",
							"性质": "公立大学",
							"性质": "公立大学",
							"性质": "公立大学",
							"竞争对手描述": "竞争对手描述竞争对手描述竞争对手描述竞争对手描述竞争对手描述竞争对手描述",
							"竞争对手描述": "竞争对手描述竞争对手描述竞争对手描述竞争对手描述竞争对手描述竞争对手描述",
							"竞争对手描述": "竞争对手描述竞争对手描述竞争对手描述竞争对手描述竞争对手描述竞争对手描述",
							"竞争对手描述": "竞争对手描述竞争对手描述竞争对手描述竞争对手描述竞争对手描述竞争对手描述",
							"竞争对手描述": "竞争对手描述竞争对手描述竞争对手描述竞争对手描述竞争对手描述竞争对手描述",
						}
					},


				}
			}
		},
		computed: {
			list() {
				let arr = []
				arr = Object.values(this.detailModel)
				return arr;
			}
		},
		methods: {
			popBack() {
				this.$router.back({

				})
			}
		}
	}
</script>

<style scoped>
	.page {
		flex: 1;
		display: flex;
		flex-direction: column;
		background-color: #f4f5f7;
	}
</style>
